<template>
    <div>
        <Navtitle title="优惠券领取详情"></Navtitle>
        <div>
            <table class="mytable">
                <tr>
                    <th>名称</th>
                    <th>优惠券类型</th>
                    <th>可使用商品</th>
                    <th>使用门槛</th>
                    <th>面值</th>
                    <th>状态</th>
                </tr>
                <tr>
                    <td>{{ cuponInfo.name }}</td>
                    <td> {{ cuponInfo.type == 0
                        ? '全场赠券'
                        : (cuponInfo.type == 1
                            ? '会员赠券'
                            : (cuponInfo.type == 2
                                ? '购物赠券'
                                : '注册赠券')) }}</td>
                    <td> {{ cuponInfo.useType == 0 ? '全场通用' : '指定分类' }}</td>
                    <td>满{{ cuponInfo.minPoint }}可用</td>
                    <td>{{ cuponInfo.amount }}元</td>
                    <td>{{ new Date().getTime() - new Date(cuponInfo.endTime).getTime() > 0 ? '已过期' : '未过期' }}</td>
                </tr>
                <tr>
                    <th>有效期</th>
                    <th>总发行量</th>
                    <th>已领取</th>
                    <th>待领取</th>
                    <th>已使用</th>
                    <th>未使用</th>
                </tr>
                <tr>
                    <td>{{ dayjs(cuponInfo.endTime).format("YYYY-MM-DD HH:mm:ss") }}</td>
                    <td>{{ cuponInfo.publishCount }}</td>
                    <td>{{ cuponInfo.receiveCount }}</td>
                    <td>{{ cuponInfo.count }}</td>
                    <td>{{ cuponInfo.useCount }}</td>
                    <td>{{ cuponInfo.publishCount }}</td>
                </tr>
            </table>
        </div>
        <Search :array="array" @searchValues="searchValues"></Search>
        <table class="mytabletow">
            <tr>
                <th>优惠码</th>
                <th>领取会员</th>
                <th>领取方式</th>
                <th>领取时间</th>
                <th>当前状态</th>
                <th>使用时间</th>
                <th>订单编号</th>
            </tr>
            <tr v-for="item in cuponInfoTwo" :key="item.id">
                <td>{{ item.couponCode }}</td>
                <td>{{ item.memberNickname }}</td>
                <td>{{ item.getType }}</td>
                <td>{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}</td>
                <td>{{ item.useStatus }}</td>
                <td>{{ item.useTime }}</td>
                <td>N/A</td>
            </tr>
        </table>
        <div class="pagebox">
            <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize"
                :page-sizes="[5, 10, 15]"  :background="true" 
                layout="total, sizes, prev, pager, next, jumper" :total="allPageinfo" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>

    </div>
</template>

<script lang="ts" setup>
import Navtitle from '@/components/_s_yingxiao/_s_NavTitle.vue'
import { useRoute } from 'vue-router'
import { flash } from '@/request/api'
import Search from '@/components/_s_yingxiao/_s_Serch.vue'
import { ref } from 'vue';
import * as dayjs from 'dayjs';

let cuponInfo = ref(<any>{}) //定义第一栏数据详情的数据
let cuponInfoTwo = ref(<any>[])  //定义数据第二栏的详情
let pageSize = ref(5) //当前页有几条数据
let pageNum = ref(1)  //当前第几页
let allPageinfo = ref(0)

// 获取传递来的数据
const route = useRoute()
let countID = route.query.id
// 发送请求
function A() {
    flash.getOneCupon(countID).then(res => {
        // console.log(res); //获取数据成功
        cuponInfo.value = res
    })
}
A()
//传递给搜索框的数据
let array = [{ //搜索栏的数据
    title: '使用状态',
    havelist: true,
    appNameList: [
        '未使用',
        '已使用',
        '已过期'
    ],
    placeholder: '全部'
}, {
    title: '订单编号',
    placeholder: '订单编号',
    havelist: false
}]
// 另外一个接口 是搜索的接口 优惠券id,使用状态和订单编号获取具体数据
// 发送请求
function AX() {
    flash.couponHistoryList({
        pageSize: pageSize.value,
        pageNum: pageNum.value,
        couponId: countID,
        orderSn : '', //这个和下面的那个是绑定的其他数据
        useStatus : ''
    }).then((res) => {
        cuponInfoTwo.value = res.list
        pageSize.value = res.pageNum
        pageSize.value = res.pageSize
        allPageinfo.value= res.totalPage
    })
}
AX()
// 最后的翻页
let handleCurrentChange = (e:any)=>{
    pageNum.value = e
    AX()
}
let handleSizeChange = (e:any) =>{
    pageSize.value = e
    AX()
}

// 搜索接口
let searchValues = (e) =>{
    // console.log(e , 122);
    
}

</script>
 
<style lang="scss" scoped>
.mytable {
    width: 100%;
    text-align: center;

    tr {
        width: 100%;
        font-size: 14px;
        border: 1px solid #999;

        th {
            border: 1px solid #999;
            line-height: 35px;
            background-color: rgb(242, 246, 252);
        }

        td {
            color: #666;
            border: 1px solid #999;
            line-height: 50px;
            background-color: rgb(255, 255, 255);
        }
    }

    margin-bottom: 20px;
}

.mytabletow {
    width: 100%;
    text-align: center;

    tr {
        font-size: 14px;
        cursor: default;
        border: 1px solid #999;

        th {
            border: 1px solid #999;
            line-height: 35px;
        }

        td {
            color: #666;
            border: 1px solid #999;
            line-height: 50px;
        }
    }
}
.pagebox{
    padding-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>